<template>
  <view class="context">
    <view class="radio_type">
      <view
        class="radio_item"
        @click="typeclick(0)"
        v-bind:class="{ action_sel: types == 0 }"
      >
        <text>综合</text>
      </view>
      <view
        class="radio_item"
        @click="typeclick(1)"
        v-bind:class="{ action_sel: types == 1 }"
      >
        <text>新品</text>
      </view>
      <view
        class="radio_item"
        @click="typeclick(2)"
        v-bind:class="{ action_sel: types == 2 }"
      >
        <text>销量</text>
        <image
          class="sort_icon"
          v-if="xlsort == 0"
          src="../../../static/icon/sort_def.png"
        ></image>
        <image
          class="sort_icon"
          v-if="xlsort == 1"
          src="../../../static/icon/sort_sheng.png"
        ></image>
        <image
          class="sort_icon"
          v-if="xlsort == 2"
          src="../../../static/icon/sort_jiang.png"
        ></image>
      </view>
      <view
        class="radio_item"
        @click="typeclick(3)"
        v-bind:class="{ action_sel: types == 3 }"
      >
        <text>价格</text>
        <image
          class="sort_icon"
          v-if="jgsort == 0"
          src="../../../static/icon/sort_def.png"
        ></image>
        <image
          class="sort_icon"
          v-if="jgsort == 1"
          src="../../../static/icon/sort_sheng.png"
        ></image>
        <image
          class="sort_icon"
          v-if="jgsort == 2"
          src="../../../static/icon/sort_jiang.png"
        ></image>
      </view>
    </view>
    <scroll-view
      scroll-y="true"
      class="goodsscroll"
      style="background-color: #f5f7f9"
      @scrolltolower="scrollbottom"
    >
      <!-- 商品 -->
      <view class="goods_list">
        <view class="goods_item" v-for="item in listdat">
          <view class="imagegroup">
            <u-image
              mode="scaleToFill"
              radius="5"
              class="goodsimg"
              :width="imgwidth"
              :height="imgheight"
              :src="item.coverImage"
            >
            </u-image>
          </view>
          <view class="goods_info">
            <text class="goods_title">{{ item.goodsName }}</text>
            <text class="goods_tags">{{ item.sellPoint }}</text>
            <view>
              <text class="goods_tag_sub">已售{{ item.salesVolume }}+</text>
            </view>
            <view class="goods_tag_list">
              <text class="goods_tag_list_item"
                >已售{{ item.salesVolume }}万+</text
              >
            </view>
            <view class="goods_money">
              <view class="goods_money_a">
                <text class="mtag">￥</text>
                <text class="money_a">{{ item.originalPrice }}</text>
                <text class="mone_a_q">起</text>
              </view>
              <view class="goods_money_b">
                <text class="mtag">到手价</text>
                <text class="def_money">￥{{ item.price }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      types: 0,
      active: true,
      xlsort: 0,
      jgsort: 0,
      imgwidth: 100,
      imgheight: 120,

      listdat: [],
      page: 1,
      limt: 20,
      keyval: null,
    };
  },

  methods: {
    initwidth() {},
    datalist(p, l, t, data, w) {
      this.initwidth();
      console.log("宽度" + w);

      this.imgwidth = w * 0.48;
      this.imgheight = w * 0.48;
      this.page = p;
      this.limt = l;
      this.keyval = t;
      if (t == this.keyval) {
        this.listdat = this.listdat.concat(data);
      } else {
        this.listdat = data;
      }
    },
    typeclick(type) {
      this.types = type;
      if (type == 2 && this.xlsort == 1) {
        this.xlsort = 2;
        return;
      }
      if (type == 2 && this.xlsort == 0) {
        this.xlsort = 1;
        return;
      }
      if (type == 2 && this.xlsort == 2) {
        this.xlsort = 1;
        return;
      }

      if (type == 3 && this.jgsort == 1) {
        this.jgsort = 2;
        return;
      }
      if (type == 3 && this.jgsort == 0) {
        this.jgsort = 1;
        return;
      }
      if (type == 3 && this.jgsort == 2) {
        this.jgsort = 1;
        return;
      }
      //
      this.jgsort = 0;
      this.xlsort = 0;
    },
    //滚动到底部
    scrollbottom() {
      this.page = this.page + 1;
      this.$emit("searchGoodsList", this.page, this.limt, this.keyval);
    },
  },
  mounted() {
    this.initwidth();
  },
  onReady() {
    this.initwidth();
  },
};
</script>

<style scoped>
body {
  width: 100%;
  height: 100%;
  background-color: #f5f7f9;
}

.context {
  width: 100%;
  height: 100%;
  background-color: #f5f7f9;
}

.radio_type {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;

  background-color: #fff;
}

.radio_item {
  font-size: 14px;
  font-style: normal;
  width: 11%;
  margin-left: 7%;
  margin-right: 7%;
  height: 40px;
  line-height: 40px;
  text-align: center;
}

.action_sel {
  color: #00aa84;
  border-bottom: 3px solid #00aa84;
}

.sort_icon {
  width: 10px;
  height: 10px;
}

.goodsscroll {
  width: 100%;
  height: calc(100% - 110px);
}

.goods_list {
  width: 100%;
  height: 1000px;
  margin-top: 5px;
  background-color: #f5f7f9;
}

.goods_item {
  width: 48%;
  background-color: #00aa84;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  margin-bottom: 15px;
  background-color: white;
}

.goodsimg {
  width: 100%;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

.goods_info {
  padding: 10px;
  font-size: 14px;
}

.goods_title {
  overflow: hidden;
  text-overflow: clip;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.goods_tags {
  font-size: 20rpx;
  color: #e2771f;
}

.goods_tag_sub {
  font-size: 20rpx;
  color: #999999;
}

.goods_tag_list {
  margin-top: 3px;
}

.goods_tag_list_item {
  border: 1px solid #ff0000;
  font-size: 20rpx;
  color: #ff0000;
  padding-left: 3px;
  padding-right: 3px;
  border-radius: 3px;
}

.goods_money {
  display: flex;
  flex-direction: row;
}

.mtag {
  font-size: 16rpx;
  color: #fd6439;
}

.money_a {
  font-size: 26rpx;
  font-weight: 600;
  color: #fd6439;
}

.mone_a_q {
  font-size: 20rpx;
  color: #fd6439;
}

.goods_money_a {
  margin-right: 2px;
}

.def_money {
  font-size: 20rpx;
  color: #d8d8d8;
}
</style>
